body .box-on-top { background-image: linear-gradient( 0deg, rgba(255,255,255,0), rgba(61, 99, 165, .9) ); background-color: #332B1F; border-color: #000; }
html body.mobile #popup-container.box-on-top{width:80%;height:86%;overflow-y:scroll;}
html body.mobile .box-on-top .button.close {
    top: 70% !important;
    right: 0% !important;
    position: fixed;
    bottom: initial;
    height: 20%;
}
#content {position:relative;z-index:2;}
body .content .custom-page {overflow: visible;}
body.logged-in #pages_view, 
body.logged-in #pages_Skate_Game, 
body.logged-in #pages_Skate_Game .folder-page { position: initial; }

.header.wrap, 
.footer.wrap.fixed, 
.footer-bg.fixed,
.header-menu-wrap .menu { display: none; z-index: 0; }

#pages_view.menu-right { overflow: visible; }

#skate_game { box-shadow: 0 0 100px 20px #000; }
#skate_game.fullscreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
#skate_game.fullscreen #window { position: fixed; top: 0; left: 0; height: 100%; z-index: 0; }
#skate_game.fullscreen #scene { height: 100%}

#skate_game #home,
#skate_game #menu-toggle,
#skate_game #fullscreen,
#skate_game #reset,
#skate_game #close,
#skate_game #login { z-index: 10; }
#skate_game #close .icon { width: 52px; height: 52px; }
#skate_game .icon.login {background-image:url(../../../assets/images/icons/user.png);background-size:100% 100%;}
body.mobile #skate_game #menu #menu-toggle,
body.mobile #skate_game #menu #login{width:auto;}

#skate_game #window { width: 100%; color: black; overflow-x: scroll; overflow-y: none; -webkit-overflow-scrolling: touch; z-index: 2000; }

#skate_game #menu { position: absolute; top: 0%; height: 100%; z-index: 5; width: 100%; background-color: rgba(61, 99, 165, 1); padding:0; box-shadow: 0 0 60px 10px #FFF, 0 0 25px -5px #000 inset; background-image: linear-gradient( 0deg, rgba(255,255,255,0), rgba(170,0,255,.50) ); color: #FFF; }
#skate_game #menu .buttons{background-color:rgb(55,52,82);box-shadow: 0 0 10px 3px #000, 0px 0px 70px #d5c5ef;text-align:center;}
#skate_game .buttons .button {margin-bottom: 0;}
body.mobile #skate_game #menu .buttons{max-height:50%;height:initial;display:block;position:fixed;bottom:0;}
body.mobile #skate_game #menu button { width: 100%; text-align: left; display:block; }

#skate_game .buttons {
    max-width:50%;
    margin:10px auto 0;
    position:relative;
}
html body.mobile #skate_game .buttons.main-menu {
	width:100%;
	max-width:none;
}
#skate_game .buttons.main-menu button{
	display:block;
	width:100%;
}

#skate_game #menu .character { max-width: 30%; position: absolute; bottom: 42%; background-size: 100% 100%; }
#skate_game #menu .character.hughburt { /*background-image: url(img/character-hughburt.png);*/ right: 0; }
#skate_game #menu .character.teddy { /*background-image: url(img/character-teddy.png);*/ left: 0; }

html body.mobile #skate_game #menu button.ollies, 
html body.mobile #skate_game #menu button.runs, 
html body.mobile #skate_game #menu button.menu_info, 
html body.mobile #skate_game #menu button.menu_stats{display:inline-block;width:49%;}

#skate_game #controls {
    z-index: 1;
    margin-bottom: 0;
    position: absolute !important;
    text-align: center;
}

#skate_game #scene { background-image: url(img/bg.jpg); min-height: 250px; background-size: 100% 100%; width: 2000px;}

#skate_game #scene.level_1 { background-image: url(img/bg_1.jpg); }
#skate_game #scene.level_2 { background-image: url(img/bg_2.jpg); }
#skate_game #scene.level_3 { background-image: url(img/bg_3.jpg); }

#skate_game #nodes,
#skate_game #obstacles { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

#skate_game #nodes > div { position: absolute; }
#skate_game #node_0 { position: absolute; left: 100px; bottom: 8%; }
#skate_game #node_1 { position: absolute; left: 1900px; bottom: 8%; }

#skate_game .obstacle { min-width: 20px; min-height: 20px; position: absolute; bottom: 10%; }
#skate_game .obstacle.rock { background-image: url(img/rock.png); background-size: 100% 100%; width: 32px; height: 32px; }

#skate_game #skater.fast {
	-webkit-transition: left 8s ease-in-out .5s,bottom 4s ease-in-out .5s;
	transition: left 8s ease-in-out .5s,bottom 4s ease-in-out .5s;
}
#skate_game #skater {
    position: absolute;
    bottom: 10%;
    z-index: 5;
    -webkit-transition: left 12s ease-in-out .5s, bottom 4s ease-in-out .5s, transform 0.2s ease-in-out 0.1s;
    transition: left 12s ease-in-out .5s, bottom 4s ease-in-out .5s, transform 0.2s ease-in-out 0.1s;
    width: 121px;
    height: 164px;
    background-image: url(img/hughburt-frames.png);
}
#skate_game #skater.combo{-webkit-transition: left 2s ease-out .5s;transition: left 1s ease-out .5s;}
#skate_game #skater.crash { -webkit-transition: left 4s ease-in-out .5s, bottom 4s ease-in-out .5s !important; transition: left 4s ease-in-out .5s, bottom 4s ease-in-out .5s !important; }
#skate_game .switch { -ms-transform: scale(-1,1); -webkit-transform: scale(-1,1); transform: scale(-1,1); }

#skate_game #updater { position: absolute; top: 20%; padding: 5px 1%; background-color: rgba(255, 255, 255, 0.75); width: 98%; z-index: 1; font-size: xx-large; color: #000; box-shadow: 0 0 10px -3px #000, 0 0 5px #FFF inset; -webkit-transition: opacity 1s ease-in-out 0s; transition: opacity 1s ease-in-out 0s; }
#updater .trophy-wrap {display: inline-block;vertical-align: middle;}

#skate_game #trophies { z-index: 5; position: absolute; top: -10px; left: 0; width: 150px; height: 150px; transform-origin: 75px; background-color: transparent; }
body.mobile #skate_game #trophies { position: relative; display: inline-block; text-align: center; vertical-align: middle; margin-top: 10px; margin-bottom: -95px; }
.box-on-top .trophy, #skate_game #trophies .trophy { background-color: transparent; }
.box-on-top .trophy, #skate_game .trophy { min-width: 64px; min-height: 64px; background-image: url(img/trophies.png); background-size: 200% 200%; background-position: 0 0; position: absolute; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; left: 30%; top: 0; }
.box-on-top .trophy.flawless, #skate_game .trophy.flawless { background-position: 100% 0%; }
.box-on-top .trophy.ollies, #skate_game .trophy.ollies { background-position: 0% 100%; }
.box-on-top .trophy.runs, #skate_game .trophy.runs { background-position: 100% 100%; }
.box-on-top .trophy.conquered, #skate_game .trophy.conquered { background-position: 0% 0%; }
.box-on-top .trophy.mastered, #skate_game .trophy.mastered { background-position: 0% 0%; }


#skate_game #stats { z-index: 1; padding: 5px 10px; background-color: rgba(255,255,255,.75); border-radius: 0 0 10px 0; box-shadow: 0 0 20px -5px #000, 0px 0px 3px 0px #000 inset; color: #000; text-shadow: 2px 2px #F0F8FF;}
#skate_game #stats span.level{float: left;}
#skate_game #stats span.run{float: right;}
#skate_game #stats span.experience{text-align:right;float:right;width:100%;}
#skate_game #stats span.experience b{float:left;}
#skate_game #stats span{display:block;}

#skate_game #message { z-index: 1; position: absolute; text-align: center; width: 100%; bottom: 5%; background-color: rgba(0, 0, 0, 0.5); padding: 10px 0; color: #FFF; font-size: x-large; box-shadow: 0 0 10px -2px #FFF; }

#skate_game #status { z-index: 2; -webkit-transition: bottom .5s ease-out 0s; transition: bottom .5s ease-out 0s; height: 32px; }
#skate_game #status.move { bottom: -100px !important; width: 50%; }
#skate_game #status .trophy { position: relative; display: inline-block; left: 0; background-color: transparent; margin-right: -40px; }

#skate_game .number-particle { font-size: x-large; color: gold; text-shadow: 1px 1px 0px #AAA; }
#skate_game .number-particle span { font-size: large; color: blue; }

#skate_game #menu .ollies { background-color: #0027E1; color: #FFF; }
#skate_game #menu .runs { background-color: rgb(110, 51, 51); color: #FFF; }

#skate_game #menu .ollies.bg-red,
#skate_game #menu .runs.bg-red { background-color: #bd0000; color: #FFF; }

#skate_game #level_change { bottom: 0%; left: 45%; width: 10%; text-align: center; padding: 10px; }
body.mobile #skate_game #level_change { left: 30% !important; width: 40%; top: initial !important; }

.box-on-top .instruction-image { position: relative; top: initial; left: initial; width: 32px; height: 32px; overflow: hidden; min-width: 0; min-height: 0; display: inline-block; vertical-align: middle; }
.box-on-top .instruction-image.switch, .box-on-top .instruction-image.ollie { background-size: 200% 100%;}
.box-on-top .instruction-image.ollie { background-image: url(img/instructions.png); background-position: 0 0; }
.box-on-top .instruction-image.switch { background-image: url(img/instructions.png); background-position: 100% 0; }

#skate_game .medallion { background-image: url(img/star.png); width: 64px; height: 64px; background-size: 100% 100%; background-position: 0 0; }
#skate_game #trophies .medallion { left: 20%; position: relative; }

#skate_game .game-info .skater-stats span{display:block;color:#FFF;}

@media screen and (orientation:portrait) {
	html body.mobile #skate_game #login,
	html body.mobile #skate_game #menu-toggle,
	html body.mobile #skate_game #home{position:relative;display:inline-block;}
}

@media screen and (orientation:landscape) {
	html body.mobile #popup-container.box-on-top{width:86%;}
	html body.mobile #skate_game .buttons { 
		width:50%;
	    float:right;
	    position:relative !important;
	    height:auto;
	    max-height:100% !important;
	    max-width:50% !important;
	    margin-top:40px;
	}
	html body.mobile #skate_game .game-info {
	    float:left;
	    width:45%;
	    position:relative;
	    height:100%;	
	    padding-top:20px;	
	}
	html body.mobile #skate_game #title{margin:10px 0px 0;}
	html body.mobile #skate_game #menu .character {
		bottom:35%;
	}
	html body.mobile #skate_game .game-info #title {
		margin-top:5%;
	}
	html body.mobile #skate_game .game-info #level {
	    z-index:2;
	    position: relative;
	    /*pointer-events:none;*/
	    width:100%;
	}
}

#level_selection button{margin-right:5px;}
#level_selection .level-wrap{border-bottom:1px solid;}
#level_selection .trophy-wrap{position:relative;}
#level_selection .level.buttons{display:inline-block;width:70%;}
#level_selection .level-trophy{display:inline-block;position:relative;width:30%;vertical-align:top;margin-top:25px;}
#level_selection .level-trophy .title{position:relative;}

html body.mobile #popup-container button.close {
    top: initial !important;
    bottom: 20px !important;
    left: initial !important;
    right: 30px !important;
    height: auto;
    opacity: .5;
}